<template>
  <div id="pageSiteConfig">
    <v-container grid-list-xl fluid>
      <v-layout row wrap>
        <v-flex lg-6>
          <v-card class="mb-4">
            <v-toolbar color="primary lighten-1" dark flat dense cad>
              <v-toolbar-title class="subheading">站点设置</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-divider></v-divider>
            <v-card-text>
              <v-form>
                <v-subheader class="pa-0 my-3">基础设置</v-subheader>
                <v-text-field label="站点名称" name="app_name" type="text" v-model="config.app_name"></v-text-field>
                <v-switch
                  name="app_status"
                  :label="onOrOff(config.app_status) + `站点`"
                  v-model="config.app_status"
                ></v-switch>
                <v-textarea
                  v-show="!config.app_status"
                  name="app_close_tip"
                  label="关站说明"
                  auto-grow
                  v-model="config.app_close_tip"
                ></v-textarea>
                <v-textarea
                  name="app_notification"
                  label="站点通知"
                  auto-grow
                  value
                  v-model="config.app_notification"
                ></v-textarea>
                <v-subheader class="pa-0 my-3">SEO 设置</v-subheader>
                <v-text-field label="站点标题" name="app_title" type="text" v-model="config.app_title"></v-text-field>
                <v-text-field
                  label="站点关键词"
                  name="app_keywords"
                  type="text"
                  v-model="config.app_keywords"
                ></v-text-field>
                <v-text-field
                  label="站点描述"
                  name="app_description"
                  type="text"
                  v-model="config.app_description"
                ></v-text-field>
                <v-subheader class="pa-0 my-3">功能设置</v-subheader>
                <v-switch
                  name="app_allow_comment"
                  :label="onOrOff(config.app_allow_comment) + `评论`"
                  v-model="config.app_allow_comment"
                ></v-switch>
                <v-switch
                  name="app_allow_message"
                  :label="onOrOff(config.app_allow_message ) + `留言`"
                  v-model="config.app_allow_message"
                ></v-switch>
                <v-switch
                  name="app_allow_subscribe"
                  :label="onOrOff(config.app_allow_subscribe) + `订阅`"
                  v-model="config.app_allow_subscribe"
                ></v-switch>
                <v-switch
                  name="app_allow_reward"
                  :label="onOrOff(config.app_allow_reward) + `打赏`"
                  v-model="config.app_allow_reward"
                ></v-switch>
                <v-text-field
                  v-show="config.app_allow_reward"
                  label="支付宝打赏图片链接"
                  name="app_reward_alipay"
                  type="text"
                  v-model="config.app_reward_alipay"
                ></v-text-field>
                <v-text-field
                  v-show="config.app_allow_reward"
                  label="微信打赏图片链接"
                  name="app_reward_wechat"
                  type="text"
                  v-model="config.app_reward_wechat"
                ></v-text-field>
                <div class="form-btn">
                  <v-btn @click="save" color="primary">保存</v-btn>
                  <!-- <v-btn outline @click="clear">重置</v-btn> -->
                </div>
              </v-form>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex lg-6>
          <v-card class="mb-4">
            <v-toolbar color="primary lighten-1" dark flat dense cad>
              <v-toolbar-title class="subheading">其他设置</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-divider></v-divider>
            <v-card-text>
              <v-form>
                <v-subheader class="pa-0 my-3">站长设置</v-subheader>
                <v-text-field
                  label="站长名称"
                  name="app_admin_name"
                  type="text"
                  v-model="config.app_admin_name"
                ></v-text-field>
                <v-text-field
                  label="站长头像"
                  name="app_admin_avatar"
                  type="text"
                  v-model="config.app_admin_avatar"
                ></v-text-field>
                <v-text-field
                  label="站长BIO"
                  name="app_admin_bio"
                  type="text"
                  v-model="config.app_admin_bio"
                ></v-text-field>
                <v-text-field
                  label="站长信息"
                  name="app_admin_info"
                  type="text"
                  v-model="config.app_admin_info"
                ></v-text-field>
                <v-text-field
                  label="站长邮箱"
                  name="app_admin_mail"
                  type="email"
                  v-model="config.app_admin_mail"
                ></v-text-field>
                <v-text-field
                  label="站长邮箱投稿地址："
                  name="app_admin_mailto"
                  type="text"
                  v-model="config.app_admin_mailto"
                ></v-text-field>
                <v-text-field
                  label="Weibo"
                  name="app_admin_weibo"
                  type="text"
                  v-model="config.app_admin_weibo"
                ></v-text-field>
                <v-text-field
                  label="Github"
                  name="app_admin_github"
                  type="text"
                  v-model="config.app_admin_github"
                ></v-text-field>
                <v-text-field
                  label="QQ"
                  name="app_admin_qq"
                  type="text"
                  v-model="config.app_admin_qq"
                ></v-text-field>
                <v-subheader class="pa-0 my-3">备案设置</v-subheader>
                <v-text-field
                  label="备案号"
                  name="app_icp_num"
                  type="text"
                  v-model="config.app_icp_num"
                ></v-text-field>
                <v-text-field
                  label="公安网备案号"
                  name="app_110beian_num"
                  type="text"
                  v-model="config.app_110beian_num"
                ></v-text-field>
                <v-text-field
                  label="公安网备链接"
                  name="app_110beian_link"
                  type="text"
                  v-model="config.app_110beian_link"
                ></v-text-field>
                <v-subheader class="pa-0 my-3">其它设置</v-subheader>
                <v-switch
                  name="app_water_mark"
                  :label="onOrOff(config.app_water_mark) + `图片水印`"
                  v-model="config.app_water_mark"
                ></v-switch>
                <v-text-field
                  v-show="config.app_water_mark"
                  label="水印链接"
                  name="app_water_mark_link"
                  type="text"
                  v-model="config.app_water_mark_link"
                ></v-text-field>
                <div class="form-btn">
                  <v-btn @click="save" color="primary">保存</v-btn>
                  <!-- <v-btn outline @click="clear">重置</v-btn> -->
                </div>
              </v-form>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
import Toast from '@/plugins/toast'
import { getAllConfig, updateConfig } from '@/api/resource/config'
export default {
  name: 'site-config',
  data: () => ({
    config: {
      app_name: 'Lablog',
      app_status: true,
      app_close_tip: 'Sorry, we are maintaining the website.',
      app_notification: '本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理',
      app_title: '✨王宁凯的个人博客',
      app_keywords: '王宁凯,ningkai.wang,个人博客,lablog,技术分享',
      app_description: '王宁凯的个人技术博客',
      app_allow_comment: true,
      app_allow_message: true,
      app_allow_reward: false,
      app_reward_alipay: 'https://i.loli.net/2018/08/28/5b8508ab0140c.png',
      app_reward_wechat: 'https://i.loli.net/2018/08/28/5b8508aaf037f.png',
      app_allow_subscribe: false,
      app_admin_name: 'IMWNK',
      app_admin_avatar: 'https://i.loli.net/2018/10/18/5bc8511910632.jpg',
      app_admin_info: '👑 TO BE A PHP ARTISAN',
      app_admin_bio: '耐心。耐心并非技术技巧，但却能让程序员走的更远。写代码不容易，越是有耐心的程序员，越有可能获得成功。',
      app_admin_mail: '1655586865@qq.com',
      app_admin_mailto: 'https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=QC4pLicrISluNyEuJwAmLzgtISksbiMvLQ',
      app_admin_weibo: 'https://weibo.com/wangningkai0614',
      app_admin_github: 'https://git.io/imwnk',
      app_admin_qq: '',
      app_icp_num: '苏ICP备16063755号-1',
      app_110beian_num: '苏公网安备 32040402000323号',
      app_110beian_link: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32040402000323',
      app_water_mark: '',
      app_water_mark_link: ''
    }
  }),
  computed: {

  },
  methods: {
    init () {
      let _this = this
      getAllConfig().then(res => {
        _this.config = Object.assign(_this.config, res)
      })
    },
    save () {
      let _this = this
      let config = _this.config
      _this.$validator.validateAll().then(result => {
        if (result) {
          updateConfig(config).then(res => {
            _this.$store.dispatch('loadAppConfig')
            Toast.success({ msg: '保存成功' })
          })
        }
      })
    },
    clear () {
      let _this = this
      _this.model = {}
      _this.$validator.reset()
    },
    onOrOff (val) {
      return val ? '开启' : '关闭'
    }
  },
  created () { this.init() }
}
</script>
